<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="查看信息">
        <div>
          <el-table
            :data="rentList"
            stripe="stripe"
            height="250"
            border
            style="width: 100%">
            <el-table-column
              prop="descRent"
              label="出租/租房"
              width="100">
            </el-table-column>
            <el-table-column
              prop="descEntireRent"
              label="整租/合租"
              width="100">
            </el-table-column>
            <el-table-column
              prop="rentType"
              label="租房类型">
            </el-table-column>
            <el-table-column
              prop="rentLocation"
              label="租房位置">
            </el-table-column>
            <el-table-column
              prop="rentFloor"
              label="所在楼层">
            </el-table-column>
            <el-table-column
              prop="rentIntroduction"
              label="租房介绍">
            </el-table-column>
            <el-table-column
              prop="rentMoney"
              label="房租">
            </el-table-column>
            <el-table-column
              prop="contact"
              label="联系方式">
            </el-table-column>
            <el-table-column
              prop="other"
              label="其他说明">
            </el-table-column>
            <el-table-column
            prop="dateTime"
            label="发布时间">
            </el-table-column>      
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="发布信息">
        <el-form :label-position="labelPosition" :model="rentForm" :rules="rules" ref="rentForm" label-width="100px" class="demo-ruleForm">
          <el-form-item prop="isEntireRent">
            <el-switch
              v-model="rentForm.isEntireRent"
              inactive-color="#E6A23C"
              active-text="整租"
              inactive-text="合租">
            </el-switch>
          </el-form-item>
          <el-form-item prop="rentOrLease">
            <el-switch
              v-model="rentForm.rentOrLease"
              inactive-color="#E6A23C"
              active-text="出租"
              inactive-text="租房">
            </el-switch>
          </el-form-item>
          <el-form-item label="租房类型" prop="rentType">
            <el-input v-model="rentForm.rentType" placeholder="如：两室一厅"></el-input>
          </el-form-item>
          <el-form-item label="租房介绍" prop="rentIntroduction">
            <el-input type="textarea" v-model="rentForm.rentIntroduction" placeholder="如：要求安静限女 或 租房近公交等"></el-input>
          </el-form-item>
          <el-form-item label="租房位置" prop="rentLocation">
            <el-input v-model="rentForm.rentLocation" placeholder="房屋具体位置"></el-input>
          </el-form-item>
          <el-form-item label="所在楼层" prop="rentFloor">
            <el-input v-model="rentForm.rentFloor" placeholder="如：3/10层 或 低楼层"></el-input>
          </el-form-item>
          <el-form-item
            label="房租"
            prop="rentMoney"
            :rules="[
              { required: true, message: '房租不能为空'},
              { type: 'number', message: '房租必须为数字值'}
            ]"
          >
            <el-input type="money" v-model.number="rentForm.rentMoney" placeholder="如：800" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="contact">
            <el-input v-model="rentForm.contact" placeholder="请输入联系方式"></el-input>
          </el-form-item> 
          <el-form-item label="其他说明" prop="other">
            <el-input v-model="rentForm.other" placeholder="其他说明，如房租结算单位，可日租短租长租等"></el-input>
          </el-form-item>        
          <el-form-item>
            <el-button type="primary" @click="submitForm('rentForm')">发布信息</el-button>
            <el-button @click="resetForm('rentForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "RentComplex",
  data() {
    return {
      labelPosition: 'top',
      stripe: true,
      rentList:[],
      rentForm: {
          isEntireRent: true,
          rentMoney: '',
          rentFloor: '',
          rentIntroduction: '',
          rentLocation: '',
          rentOrLease: true,
          rentType: '',
        },
      rules: {
          rentLocation: [
            { required: true, message: '必须输入租房具体位置', trigger: 'blur' },            
          ],
          rentType: [
            { required: true, message: '必须输入租房类型', trigger: 'blur' }
          ],
          contact: [
            { required: true, message: '请留下联系方式', trigger: 'blur' }
          ],
      }
    };
  },
  mounted() {
    this.initRentList();
  },
  methods: {
    initRentList() {
      let page = 1;
      this.getRequest('/rent/rents?currentPage='+page).then((resp) => {
        if(resp) {
          this.rentList = resp;
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.putRequest('/rent/insertRent', this.rentForm).then((resp) => {
            if(resp) {
              this.resetForm(formName);
              console.log(resp)
            }
          })
        } else {
          console.log('请按要求输入!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style>
</style>